<template>
    <div>
        <bk-fixed-navbar v-if="nav.show"
            :position="nav.position"
            :nav-items="nav.items"></bk-fixed-navbar>
        <el-drawer
            :title="commodityComment.commodity.name"
            :visible.sync="commodityComment.visable"
            :with-header="false">
            <el-table
                :data="commodityComment.comments"
                style="width: 100%;height: 600px">
                <el-table-column
                    label="商品评论"
                    prop="evaluate"
                    width="450">
                </el-table-column>
            </el-table>
        </el-drawer>
        <el-dialog title="请选择商品数量" :visible.sync="shoppingTrolley.visable" width="20%">
            <el-input-number v-model="shoppingTrolley.number" label="描述文字" size="mini"></el-input-number>
            <span slot="footer" class="dialog-footer">
                <el-button @click="shoppingTrolley.visable = false">取 消</el-button>
                <el-button type="primary" @click="addToShoppingTrolley">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="商品详情" :visible.sync="commodityDetail.visable">
            <el-container>
                <el-aside width="50%">
                    <img :src="commodityDetail.commodity.url" style="height: 300px;">
                </el-aside>
                <el-container>
                    <el-main>
                        <el-descriptions class="margin-top" title="" :column="1">
                            <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-caret-right"></i>
                                    商品名称
                                </template>
                                <el-input
                                    size="mini"
                                    placeholder="请输入内容"
                                    suffix-icon="el-icon-date"
                                    v-model="commodityDetail.commodity.name">
                                </el-input>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-caret-right"></i>
                                    商品价格
                                </template>
                                <el-input
                                    size="mini"
                                    placeholder="请输入内容"
                                    suffix-icon="el-icon-date"
                                    v-model="commodityDetail.commodity.price">
                                </el-input>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-caret-right"></i>
                                    商品类别
                                </template>
                                <el-input
                                    size="mini"
                                    placeholder="请输入内容"
                                    suffix-icon="el-icon-date"
                                    v-model="commodityDetail.commodity.price">
                                </el-input>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-caret-right"></i>
                                    商品库存
                                </template>
                                <el-input
                                    size="mini"
                                    placeholder="请输入内容"
                                    suffix-icon="el-icon-date"
                                    v-model="commodityDetail.commodity.repertory_number">
                                </el-input>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-caret-right"></i>
                                    商品概述
                                </template>
                                <el-input
                                    type="textarea"
                                    :rows="2"
                                    size="mini"
                                    placeholder="请输入内容"
                                    suffix-icon="el-icon-date"
                                    v-model="commodityDetail.commodity.commoditydescribe">
                                </el-input>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-main>
                </el-container>
            </el-container>
            <!-- <el-row :gutter="20">
                <el-col :span="10">
                    <div class="grid-content bg-purple">
                        <img :src="commodityDetail.commodity.url" style="height: 50px display:inline-block">
                    </div>
                </el-col>
                <el-col :span="10">
                    <div class="grid-content bg-purple">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>卡片名称</span>
                                <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                            </div>
                        </el-card>
                    </div>
                </el-col>
            </el-row> -->
        </el-dialog>
        <el-table
            :data="commodityList1"
            @row-click="handleRowClick"
            style="width: 100%;height: 600px"
            :key="key">
            <el-table-column
                label="商品图片"
                width="180">
                <template slot-scope="scope">
                    <img :src="scope.row.url" style="height: 80px">
                </template>
            </el-table-column>
            <!-- <el-table-column
                label="商品编号"
                prop="id"
                width="180">
            </el-table-column> -->
            <el-table-column
                label="商品名称"
                prop="name"
                width="150">
                <template slot-scope="scope">
                    <!-- <el-link type="primary" icon="el-icon-view">{{scope.row.name}}</el-link> -->
                    <el-tooltip content="查看商品评论" placement="top">
                        <el-link type="primary" icon="el-icon-view" @click="handleCommentClick(scope.row)">{{scope.row.name}}</el-link>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column
                label="商品价格"
                prop="price"
                width="150"
                sortable>
                <template slot-scope="scope">
                    <bk-animate-number :value="scope.row.price">$</bk-animate-number>
                </template>
            </el-table-column>
            <el-table-column
                label="商品分类"
                prop="category_id"
                width="150"
                :filters="categoryFilters"
                :filter-method="categoryfilterHandler">
                <template slot-scope="scope">
                    <el-tag>{{fingCategoryById(scope.row.category_id)}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                label="商品状态"
                width="140">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.isHot === '1'" effect="dark" type="danger">火热爆款</el-tag>
                    <el-tag v-if="scope.row.isNew === '1'" effect="dark" type="success">新品上市</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" v-if="isAdmin">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.id > 0" type="primary" icon="el-icon-shopping-cart-2" circle @click="handleShoppingClick(scope.row.id)"></el-button>
                    <el-button v-if="isFavourite1(scope.row.id)" type="warning" icon="el-icon-star-off" circle @click="handleFavouriteClick(0,scope.row.id)"></el-button>
                    <el-button v-if="!isFavourite1(scope.row.id)" type="info" icon="el-icon-star-off" circle @click="handleFavouriteClick(1,scope.row.id)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="pagination.total"
            :page-size="pagination.pageSize"
            :current-page="pagination.pageNum"
            @current-change="handleCurrentChange"
            style="width:40%;margin-left:40%">
        </el-pagination>
    </div>
</template>
<script>
    export default {
        components: {
        },
        data () {
            return {
                key: 1,
                favourateList: [],
                nav: {
                    show: true,
                    position: 'middle',
                    items: [
                        {
                            icon: 'el-icon-shopping-cart-2',
                            text: '购物车',
                            tooltip: '查看我的购物车',
                            action: () => {
                                this.$router.push({ name: 'shoppingTrolley' })
                            }
                        },
                        {
                            icon: 'el-icon-goods',
                            text: '订单',
                            tooltip: '查看我的订单',
                            action: () => {
                                this.$router.push({ name: 'order' })
                            }
                        }
                    ]
                },
                commodityComment: {
                    visable: false,
                    comments: [],
                    commodity: {}
                },
                isAdmin: false,
                user: {},
                commodityDetail: {
                    visable: false,
                    commodity: []
                },
                shoppingTrolley: {
                    visable: false,
                    number: 1,
                    commodityId: null
                },
                pagination: {
                    pageSize: 5,
                    pageNum: 1,
                    pages: 2,
                    total: 10
                },
                commodityList: [
                ],
                categoryList: [
                ],
                categoryFilters: [
                ],
                commodityList1: [],
                urlList: [],
                url: '',
                favourate: ''
            }
        },
        computed: {
            isFavourite1 () {
                return function (id) {
                    let flag = false
                    this.favourateList.forEach(element => {
                        if (element === id) {
                            flag = true
                        }
                    })
                    return flag
                }
            }
        },
        mounted: function () {
            // if (location.href.indexOf('#reloaded') === -1) {
            //     location.href = location.href + ''
            //     location.reload()
            // }
        },
        created () {
            this.user = JSON.parse(sessionStorage.getItem('user'))
            if (this.user.name === 'admin') {
                this.isAdmin = true
            }
            this.getFavouriteCommodityId()
            this.getAllCommodity()
            this.getCategory()
            // location.replace(location.href)
        },
        methods: {
            async getFavouriteCommodityId () {
                this.$http.get('/favorite/selectAll').then(res => {
                    this.favourateList = JSON.parse(JSON.stringify(res.data.data))
                })
            },
            async getCommodityComments (id) {
                this.$http.get('/consumer/comment', { params: { 'id': id } }).then(res => {
                    this.commodityComment.comments = res.data.data.list
                    console.log(this.commodityComment.comments)
                })
            },
            async addToShoppingTrolley () {
                const data = {
                    'commodity_id': this.shoppingTrolley.id,
                    'number': this.shoppingTrolley.number
                }
                this.$http.post('/shoppingTrolley/addCommodityInto', data).then(res => {
                    console.log(res)
                })
                this.shoppingTrolley.visable = false
            },
            async getCategory () {
                this.$http.get('/findCommodityCategory').then(res => {
                    this.categoryList = res.data.data
                    this.categoryFilters = []
                    this.categoryList.forEach(element => {
                        this.categoryFilters.push({
                            text: element.category,
                            value: element.id
                        })
                    })
                })
            },
            async deleteCommodity (id) {
                const data = {
                    'id': id
                }
                this.$http.delete('/admin/deleteCommodity', { data: data }).then(res => {
                    //
                    this.getAllCommodity()
                })
            },
            async getAllCommodity () {
                this.commodityList1 = []
                if (this.isAdmin) {
                    this.$http.get('/consumer/findCommodity', { params: { 'pageNum': this.pagination.pageNum, 'pageSize': this.pagination.pageSize } }).then(res => {
                        console.log(111)
                        console.log(res)
                        this.pagination.total = res.data.data.total
                        this.pagination.pageNum = res.data.data.pageNum
                        this.pagination.pages = res.data.data.pages
                        this.commodityList = res.data.data.list
                        console.log(this.commodityList)
                        this.commodityList.forEach(element => {
                            this.getPicture(element)
                        })
                    })
                } else {
                    this.$http.get('/consumer/findCommodity', { params: { 'pageNum': this.pagination.pageNum, 'pageSize': this.pagination.pageSize } }).then(res => {
                        this.pagination.total = res.data.data.total
                        this.pagination.pageNum = res.data.data.pageNum
                        this.pagination.pages = res.data.data.pages
                        this.commodityList = res.data.data.list
                        console.log(this.commodityList)
                        this.commodityList.forEach(element => {
                            this.getPicture(element)
                        })
                    })
                }
            },
            async getPicture (commodity) {
                this.$http.get('/image', { params: { 'imageName': commodity.picture_name }, responseType: 'blob' }).then(res => {
                    const blob = new Blob([res.data])
                    const url = window.URL.createObjectURL(blob)
                    this.url = url
                    this.$set(commodity, 'url', url)
                    this.$set(commodity, 'isFavorite', this.isFavourite(commodity.id))
                    this.commodityList1.push(commodity)
                })
            },
            handleDelete (index, row) {
                this.deleteCommodity(row.id)
            },
            handleEdit (index, row) {
                this.$router.push({ name: 'addCommodity', params: { alterData: row } })
            },
            handleCurrentChange (newPage) {
                this.pagination.pageNum = newPage
                this.getAllCommodity()
            },
            fingCategoryById (id) {
                let name = ''
                this.categoryList.forEach(element => {
                    if (id === element.id) {
                        name = element.category
                    }
                })
                return name
            },
            handleRowClick (row, column, event) {
                if (column.label !== '操作' && column.label !== '商品名称') {
                    this.commodityDetail.commodity = JSON.parse(JSON.stringify(row))
                    this.commodityDetail.visable = true
                }
            },
            handleCommentClick (row) {
                console.log(222)
                this.commodityComment.commodity = JSON.parse(JSON.stringify(row))
                this.getCommodityComments(row.id)
                this.commodityComment.visable = true
            },
            gotoCommodityReview (row) {
                this.$router.push({ name: 'commodityReview', params: { commodity: row } })
            },
            handleFavouriteClick (flag, id) {
                if (flag === 1) {
                    this.$http.get('/favorite/incCommodityNumber', { params: { 'commodity_id': id } }).then(res => {
                        console.log(res)
                    })
                } else {
                    this.$http.get('/favorite/subCommodityNumber', { params: { 'commodity_id': id } }).then(res => {
                        console.log(res)
                    })
                }
                this.getFavouriteCommodityId()
            },
            categoryfilterHandler (value, row, column) {
                const property = column['property']
                return row[property] === value
            },
            handleShoppingClick (id) {
                this.shoppingTrolley.id = id
                this.shoppingTrolley.visable = true
            },
            isFavourite (id) {
                let flag = false
                this.favourateList.forEach(element => {
                    if (element === id) {
                        flag = true
                    }
                })
                return flag
            }
        }
    }
</script>

<style scoped>
.select-collection {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
